<template>
  <div class="c-fs34 c-wb-ba">
    <div>
      <div v-for="(item,index) in optionsList" :key="index" :class="optionClass[index]=='choose'?'theme-bg-10':''" class="c-ph24 c-flex-row c-pv24 c-fs24 c-br16 c-bg-sblack c-mt20 c-bg-sgray" @click="clickOption(index,item)">
        <!-- <div class="c-mr20" :class="optionClass[index]=='choose'?'theme-fc':''">{{optionArr[index]}}</div> -->
        <div class="c-wb-ba copyNot imgInlineb c-textAlign-j problemdDom" :class="optionClass[index]=='choose'?'theme-fc':''" v-html="item.value"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "singleChoice",
  props: {
    optionsList: {
      type: Object,
      default: null
    },
    formLindex: {
      type: Number,
      default: 0
    },
    userAnswer: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      optionClass: [],
      fbAnswer:[],
      answerList: [false, false, false, false, false, false, false, false, false, false],
      optionArr: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
    };
  },
  watch: {

  },
  activated() {
    this.answerList = [false, false, false, false, false, false, false, false, false, false];
    this.optionClass = ['noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose'];
    console.log(22222222)
    if (this.userAnswer) {
      for (let i = 0; i < this.userAnswer.length; i++) {
        for (let j = 0;j < this.optionsList.length; j++) {
          if (this.userAnswer[i] == this.optionsList[j].value) {
            this.$set(this.answerList, j, true);
            this.$set(this.optionClass, j, 'choose');
            // this.userAnswer = this.transAnswerText();
          }
        }
      }
    }
  },
  methods: {
    showMoreQue() {
      this.moreQue = !this.moreQue
    },
    clickOption(index) {
        this.answerList = [false, false, false, false, false, false, false, false, false, false];
        this.optionClass = ['noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose'];
        this.$set(this.answerList, index, true);
        this.$set(this.optionClass, index, 'choose');
        this.userAnswer = this.optionsList[index].value;
        this.$emit('changeVal', this.formLindex, this.userAnswer)
    },
  },
};
</script>

<style scoped>
.imgInlineb  /deep/ img{display: inline-block;vertical-align: middle;}
.problemdDom /deep/ img{
  display: inline-block;
  vertical-align: middle;
}
.problemdDom /deep/ p{
  text-align: left!important;
}
.problemdDom /deep/ p img{
  display: block;
}
.problemdDom /deep/ .wscnph{
  display: block;
}
</style>
